<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Password Validation Widget</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/passwordvalidation/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/passwordvalidation/SpryValidationPassword.js" type="text/javascript"></script>
<link href="../../widgets/confirmvalidation/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/confirmvalidation/SpryValidationConfirm.js" type="text/javascript"></script>
<style type="text/css">
.tablecontainer {
	width:540px;
}
.tablecell input {
	width:150px;
}
.tablecell {
	width:33%;
	float:left;
	height:60px;
}
.submitContainer {
	clear:both;
}
.container {
	clear:both;
}
label {
	display:block;
	margin-bottom:7px;
}
td {
	vertical-align:bottom;
	padding:2px;
}
#sprypassword13.passwordRequiredState .passwordRequiredMsg, #sprypassword13.passwordMinCharsState .passwordMinCharsMsg, #sprypassword13.passwordInvalidStrengthState .passwordInvalidStrengthMsg {
	display:inline;
	color:#0033CC;
	border:1px blue solid;
}
</style>
</head>
<body>
<h3>Spry Password Validation Samples</h3>
<p>This page provides examples of the password widget capabilities.</p>
<hr />
<!--

	First Example - Different validation moments - Change, Blur, Submit

-->
<p>In the first example, there is a password widget that checks if the field is not empty, when the password is required. The validation event can be 'onChange' - this means the validation will be triggered as you type. 'onBlur' - when the password field loses focus, and validation 'onSubmit' - when the form is submitted. All Spry Validation widgets validate onSubmit. 'onBlur' and 'onChange' are options.</p>
<form id="form1" name="form1" method="get" action="PasswordValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <label for="password1">Change - Submit</label>
      <span id="sprypassword1">
      <input type="password" name="password1" id="password1" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <div class="tablecell">
      <label for="password2">Blur - Submit</label>
      <span id="sprypassword2">
      <input type="password" name="password2" id="password2" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <div class="tablecell">
      <label for="password3">Submit</label>
      <span id="sprypassword3">
      <input type="password" name="password3" id="password3" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <br style="clear:both;" />
  </div>
  <div class="submitContainer">
    <input type="submit" name="submit1" id="submit1" value="Submit" />
    <hr />
  </div>
</form>
<script type="text/javascript">

	var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1",{validateOn:["change"]});
	var sprypassword2 = new Spry.Widget.ValidationPassword("sprypassword2",{validateOn:["blur"]});
	var sprypassword3 = new Spry.Widget.ValidationPassword("sprypassword3");
</script>
<!--

	Second Example - min max number of characters

-->
<p>The password validation widget can have  conditions to increase the password complexity. This example contains a password validation widget that has to receive a minimum 6 characters and maximum 20 characters to pass the validation.</p>
<form id="form2" name="form2" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password4">Min chars: </label></td>
      <td id="sprypassword4"><input type="password" name="password4" id="password4" />
        Min 6 chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> </td>
    </tr>
    <tr>
      <td><label for="password5">Max chars:</label></td>
      <td id="sprypassword5"><input type="password" name="password5" id="password5" />
        Max 20 chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMaxCharsMsg">The maximum number of characters exceed</span></td>
    </tr>
    <tr>
      <td><label for="password6">Min/Max chars:</label></td>
      <td id="sprypassword6"><input type="password" name="password6" id="password6" />
        Min 6 chars, Max 20 chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> <span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit2" id="submit2" value="Submit" />
      </td>
    </tr>
  </table>
</form>
<hr/>
<script type="text/javascript">

	var sprypassword4 = new Spry.Widget.ValidationPassword("sprypassword4",{minChars:6});
	var sprypassword5 = new Spry.Widget.ValidationPassword("sprypassword5",{maxChars:20});
	var sprypassword6 = new Spry.Widget.ValidationPassword("sprypassword6",{minChars:6, maxChars:20});
</script>
<!--

	Third Example - min/maxAphaChars

-->
<p>Using the password validation widget, you can define your own password strength by adding a combination of conditions. <br />
  In the first password example below you can have: a maximum 20 characters (any kind of character: number, special chars, etc.), but there should be a minimum of 3 Alphabetical (alpha) chars and maximum 6 Alpha characters to be a valid password. <br />
  The next password field uses min/maxUpperAlphaChars (any alpha character in upper case).<br />
  You can add conditions to the password field to force a min/max number of numeric characters and also a min/max number of special characters, as you can see in the last two examples of this section.</p>
<form id="form3" name="form3" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password7">Alpha chars:</label></td>
      <td><span id="sprypassword7">
        <input type="password" name="password7" id="password7" />
        Max 20 chars, min 3 Alpha chars/max 6 Alpha chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met</span></span></td>
    </tr>
    <tr>
      <td><label for="password8">Upper Alpha chars:</label></td>
      <td><span id="sprypassword8">
        <input type="password" name="password8" id="password8" />
        Max 20 chars, min 2 upper Alpha chars/max 5 upper Alpha chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span> </td>
    </tr>
    <tr>
      <td><label for="password9">Number chars:</label></td>
      <td><span id="sprypassword9">
        <input type="password" name="password9" id="password9" />
        Min 6 chars, min 2 Number chars/max 5 Number chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span> </td>
    </tr>
    <tr>
      <td><label for="password10">Special chars:</label></td>
      <td><span id="sprypassword10">
        <input type="password" name="password10" id="password10" />
        Min 6 chars, min 2 Special chars/max 5 Special chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit3" id="submit3" value="Submit" />
      </td>
    </tr>
  </table>
  <hr/>
</form>
<script type="text/javascript">

	var sprypassword7 = new Spry.Widget.ValidationPassword("sprypassword7",{maxChars:20, minAlphaChars:3, maxAlphaChars:6});
	var sprypassword8 = new Spry.Widget.ValidationPassword("sprypassword8",{maxChars:20, minUpperAlphaChars:2, maxUpperAlphaChars:5});
	var sprypassword9 = new Spry.Widget.ValidationPassword("sprypassword9",{minChars:6, minNumbers:2, maxNumbers:5});
	var sprypassword10 = new Spry.Widget.ValidationPassword("sprypassword10",{minChars:6, minSpecialChars:2, maxSpecialChars:5});

</script>
<p> This example shows how to disallow special characters and numbers for your password.</p>
<form id="form3.1" name="form3.1" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password3.1">No Special Chars:</label></td>
      <td><span id="sprypassword3.1">
        <input type="password" name="password3.1" id="password3.1" />
        No Special chars are allowed <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span></td>
    </tr>
    <tr>
      <td><label for="password3.2">No  Numeric Chars:</label></td>
      <td><span id="sprypassword3.2">
        <input type="password" name="password3.2" id="password3.2" />
        No numeric chars are allowed <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit4" id="submit4" value="Submit" />
      </td>
    </tr>
  </table>
</form>
<hr/>
<script type="text/javascript">

var sprypassword3_1 = new Spry.Widget.ValidationPassword("sprypassword3.1",{minSpecialChars:0, maxSpecialChars:0, validateOn:['change']});
var sprypassword3_2 = new Spry.Widget.ValidationPassword("sprypassword3.2",{minNumbers:0, maxNumbers:0,validateOn:['change']});
	
</script>
<p> You can also use a fixed number of characters for password by specifying the same value for min and max options.</p>
<form id="form3.3" name="form3.3" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password3.3">Fix number Chars:</label></td>
      <td><span id="sprypassword3.3">
        <input type="password" name="password3.3" id="password3.3" />
        Only 2 numeric chars are allowed, no more, no less <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span></td>
    </tr>
    <tr>
      <td><label for="password3.4">Fix Upper case Chars:</label></td>
      <td><span id="sprypassword3.4">
        <input type="password" name="password3.4" id="password3.4" />
        Only 2 upper case chars are allowed, no more, no less <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit5" id="submit5" value="Submit" />
      </td>
    </tr>
  </table>
</form>
<script type="text/javascript">

	var sprypassword3_3 = new Spry.Widget.ValidationPassword("sprypassword3.3",{minNumbers:2, maxNumbers:2, validateOn:['blur']});
	var sprypassword3_4 = new Spry.Widget.ValidationPassword("sprypassword3.4",{minUpperAlphaChars:2, maxUpperAlphaChars:2, validateOn:['blur']});
	
</script>
To pass the validation in this example, the password should have at least: 2 number characters, 2 alpha characters in upper case and one Special character. The maximum length should be between 8 and 10 characters.
<p>The second input in this section is the password confirmation. To use this functionality you have to use the <a href="ConfirmValidationSample.html">Confirm Validation Widget</a>.</p>
<form id="form4" name="form4" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password11">Password: </label></td>
      <td><span id="sprypassword11">
        <input type="password" name="password11" id="password11" />
        Min 2 Numbers, min 2 Alpha Upper chars, min 1 Special chars, min 8 chars/max 10 chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span> </td>
    </tr>
    <tr>
      <td><label for="confirm">Confirm Password: </label></td>
      <td><span id="spryconfirm1">
        <input type="password" name="confirm" id="confirm" />
Verifies the re-entered password as identical with first.         <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit6" id="submit6" value="Submit" />
      </td>
    </tr>
  </table>
  <hr/>
</form>
<script type="text/javascript">

	var sprypassword11 = new Spry.Widget.ValidationPassword("sprypassword11",{maxChars:10, minChars:8, minUpperAlphaChars:2, minNumbers:2, minSpecialChars:1});
	var spryconf1 = new Spry.Widget.ValidationConfirm("spryconfirm1", "sprypassword11", {validateOn: ['blur']});
</script>
<p>You can  set an additional error message for the password widget in case you want to give more intuitive details to the user about what  should be filled in.</p>
<form id="form5" name="form5" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password12">Password: </label></td>
      <td><span id="sprypassword12">
        <input type="password" name="password12" id="password12" />
        Min 6 chars <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> </span> </td>
    </tr>
    <tr>
      <td><label for="confirm2">Confirm Password: </label></td>
      <td><span id="spryconfirm2">
        <input type="password" name="confirm2" id="confirm2" />
        Verifies if the re-entered password is identical with first one <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </td>
    </tr>
    <tr>
      <td>Errors:</td>
      <td><span id="additionalErrorZone"> <span class="passwordRequiredMsg">You must enter a password!</span> <span class="passwordMinCharsMsg">You should have at least 6 characters for your password.</span> </span></td>
    </tr>
  </table>
  <div class="submitContainer">
    <input type="submit" name="submit7" id="submit7" value="Submit" />
    <hr />
  </div>
</form>
<script type="text/javascript">

	var sprypassword12 = new Spry.Widget.ValidationPassword("sprypassword12",{ minChars:6, additionalError:'additionalErrorZone'});
	var spryconf1 = new Spry.Widget.ValidationConfirm("spryconfirm2", "sprypassword12", {validateOn: ['change']});
  </script>
<p>The following example shows how to change the default appearance for the error messages, by over-writing the default css classes.</p>
<form id="form5.1" name="form5.1" method="get" action="PasswordValidationSample.html">
  <table>
    <tr>
      <td><label for="password13">Password: </label></td>
      <td><span id="sprypassword13">
        <input type="password" name="password13" id="password13" />
        Min 6 chars, min 1 Special char <span class="passwordRequiredMsg">A value is required.</span> <span class="passwordMinCharsMsg">The minimum number of characters not met.</span> <span class="passwordInvalidStrengthMsg">The password strength condition not met.</span> </span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit8" id="submit8" value="Submit" />
      </td>
    </tr>
  </table>
</form>
<script type="text/javascript">

	var sprypassword13 = new Spry.Widget.ValidationPassword("sprypassword13",{minChars:6, minSpecialChars:1, validateOn:['blur']});

</script>
</body>
</html>
